<template>
  <div style="ds-box2 ds-box-hover">
    <div class="ds-box2 ds-box-hover" @click="drawOpen(name)">
      <div style="width: 5%"></div>
      <div class="ds-grow">
        <span class="data-name">{{ name }}</span>
      </div>
    </div>
    <div class="ds-hr2"></div>
  </div>
</template>
<script>
import { colorRgba } from "../../utils/color";
import { Draw } from "ol/interaction";
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Circle from "ol/style/Circle";
export default {
  props: [
    "map",
    "dialog",
    "dialogName",
    "pName",
    "classify",
    "color",
    "width",
    "details",
  ], //地图组件传值
  data() {
    return {
      name: "新建线条",
      draw: null,
      vectorV: null,
    };
  },
  watch: {
    dialog() {
      //按下了确定键
      if (this.dialogName == "新建线条") {
        this.drawStart();
      }
    },
  },
  methods: {
    drawOpen(item) {
      //传递参数
      if (item == "新建线条") this.$emit("dialogOpen", "新建线条");
      if (item == "撤销上一步") this.drawRevocation();
      if (item == "移除线条") this.drawRemove();
      return item;
    },
    //开始绘制线条
    drawStart() {
      let _this = this;
      const source = new VectorSource();
      this.vectorV = new VectorLayer({
        source: source,
        style: new Style({
          fill: new Fill({
            //  color: "rgba(255,0,0,0.05)",
            color: colorRgba(_this.color, 0.05),
          }),
          stroke: new Stroke({
            //color: "rgba(255,0,0,0.6)",
            color: colorRgba(_this.color, 1),
            width: _this.width,
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              //color: "rgba(255,0,0,0.6)",
              color: colorRgba(_this.color, 0.6),
            }),
          }),
        }),
      });

      this.name = "撤销上一步";
      //设置画线样式
      // const type = typeSelect.value == 'area' ? 'Polygon' : 'LineString';
      this.draw = new Draw({
        source: source,
        type: "LineString",
        style: new Style({
          fill: new Fill({
            color: colorRgba(_this.color, 0.2),
          }),
          stroke: new Stroke({
            color: colorRgba(_this.color, 1),
            lineDash: [10, 10],
            width: _this.width,
          }),
          // image: new Circle({
          //   radius: 5,
          //   stroke: new Stroke({
          //     color: "rgba(0, 0, 0, 0.7)",
          //   }),
          //   fill: new Fill({
          //     color: "rgba(255, 255, 255, 0.2)",
          //   }),
          // }),
        }),
      });
      this.map.addInteraction(this.draw);
      this.map.addLayer(this.vectorV);
      // this.draw.on("drawend", function () {
      //   _this.map.removeInteraction(draw);
      // });
      //TODO 应该取消双击结束绘制2022/4/24
      this.draw.on("drawend", function (evt) {
        _this.drawingEnd(evt);
      });
      //添加撤销快捷键
      this.draw.on("drawstart", () => {
        document.onkeydown = (e) => {
          if (e.keyCode == 27) {
            _this.draw.removeLastPoint();
          }
        };
      });
    },
    // 线条撤销上一个点
    drawRevocation() {
      this.draw.removeLastPoint();
    },
    //构建线条结束
    drawingEnd(evt) {
      let geo = evt.feature.getGeometry().transform("EPSG:3857", "EPSG:4326");
      let t = geo.getType();
      if (t === "LineString") {
        // 获取坐标点
        const points = geo.getCoordinates();
        // 获取质心

        var x = 0.0;
        var y = 0.0;
        for (let i = 0; i < points[0].length; i++) {
          x = x + parseFloat(points[0][i][0]);
          y = y + parseFloat(points[0][i][1]);
        }
        x = x / points[0].length;
        y = y / points[0].length;

        // 获取颜色
        // 获取名称
        // 获取分类
        // 获取点列表
        // 获取质心
        let output = {
          type: "FeatureCollection",
          features: [
            {
              properties: {
                name: this.pName,
                classify: this.classify,
                stroke: colorRgba(this.color, 0.6),
                fill: colorRgba(this.color, 0.3),
                width: this.width,
                details: this.details,
                // 过时的
                centroid: [x, y],
              },
              type: "Feature",
              geometry: {
                type: "MultiLineString",
                coordinates: [points],
              },
            },
          ],
        };
        //过时的
        // output.properties.centroid = [x, y];

        //输出json
        console.log(JSON.stringify(output));
        //post请求
        this.$http
          .post("", {
            dataName: this.classify + "-" + this.pName,
            data: JSON.stringify(output),
          })
          .then((res) => {
            console.log(res.data);
          })
          .catch(function (err) {
            console.log(err);
          });

        this.map.removeInteraction(this.draw); // 移除绘制
        document.onkeydown = null; //清除撤销快捷键
        this.name = "移除线条";
        //2022/4/1   这里采用了转换坐标系的方式还原了多边形,以保证绘制完毕得到json后多边形能够正常显示
        evt.feature.getGeometry().transform("EPSG:4326", "EPSG:3857");
      }
    },
    //线条移除
    drawRemove() {
      // this.source.clear();
      this.name = "新建线条";
      this.map.removeInteraction(this.draw);
      this.map.removeLayer(this.vectorV);
    },
  },
};
</script>

<style scoped></style>
